$(function () {
  visitsAndNumOfUsers();
  protectedForest();

  function visitsAndNumOfUsers() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('line-chart'));

    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    let option = {
      backgroundColor: '#fff',
      title: {
        left: 'center',
        top: '5%'
      },
      legend: {
        icon: 'circle',
        top: '5%',
        right: '5%',
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
          color: '#556677'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            show: true,
            backgroundColor: '#fff',
            color: '#556677',
            borderColor: 'rgba(0,0,0,0)',
            shadowColor: 'rgba(0,0,0,0)',
            shadowOffsetY: 0
          },
          lineStyle: {
            width: 0
          }
        },
        backgroundColor: '#fff',
        textStyle: {
          color: '#5c6c7c'
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
      },
      grid: {
        top: '15%'
      },
      xAxis: [{
        type: 'category',
        data: ['2020.1', '2020.2', '2020.3', '2020.4', '2020.5', '2020.6', '2020.7', '2020.8', '2020.9','2020.10','2020.11','2020.12'],
        axisLine: {
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#556677'
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],
            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#fff' // 0% 处的颜色
              }, {
                // offset: 0.9,
                offset: 0.86,
                color: '#fff' // 0% 处的颜色
              }, {
                offset: 0.86,
                color: '#33c0cd' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#33c0cd' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        boundaryGap: false
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#556677'
          }
        },
        splitLine: {
          show: false
        }
      }, {
        type: 'value',
        position: 'right',
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#556677'
          },
          formatter: '{value}'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCE2E8'
          }
        },
        splitLine: {
          show: false
        }
      }],
      series: [{
        name: '访问人数',
        type: 'line',
        data: [10, 10, 30, 12, 15, 3, 7, 25, 40, 15, 10, 17],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: '#9effff'
          },
            {
              offset: 1,
              color: '#9E87FF'
            }
          ]),
          shadowColor: 'rgba(158,135,255, 0.3)',
          shadowBlur: 10,
          shadowOffsetY: 20
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0]
          }
        }
      }, {
          name: '注册用户数',
          type: 'line',
          data: [150, 155, 170, 183, 185, 188, 201, 230, 256, 280, 299, 350],
          symbolSize: 1,
          yAxisIndex: 1,
          symbol: 'circle',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: '#fe9a'
            },
              {
                offset: 1,
                color: '#fe9a8b'
              }
            ]),
            shadowColor: 'rgba(254,154,139, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[2],
              borderColor: colorList[2]
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }


  function protectedForest() {
    let myChart = echarts.init(document.getElementById('donut-chart'));

    var labelData = [];
    var labelData1 = [];
    for (var i = 0; i < 150; ++i) {
      labelData.push({
        value: 1,
        name: i,
        itemStyle: {
          normal: {
            color: 'rgba(0,209,228,0)',
          }
        }
      });
    }
    for (var i = 0; i < labelData.length; ++i) {
      if (labelData[i].name < 50) {
        labelData[i].itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [{
                  offset: 0,
                  color: '#6dfbff'
                },
                  {
                    offset: 1,
                    color: '#02aeff'
                  }
                ]
            )
          },

        }
      }
    }
    for (var i = 0; i < 150; ++i) {
      labelData1.push({
        value: 1,
        name: i,
        itemStyle: {
          normal: {
            color: 'rgba(0,209,228,0)',
          }
        }
      });
    }
    for (var i = 0; i < labelData1.length; ++i) {
      if (labelData1[i].name < 150) {
        labelData1[i].itemStyle = {
          normal: {
            color: '#464451',
          },

        }
      }
    }

    function Pie() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 10 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 30,
            itemStyle: {
              normal: {
                color: "rgba(0,255,255,1)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
      return dataArr
    }

    function Pie1() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 5 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,255,255,1)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
      return dataArr
    }

    function Pie2() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 5 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,255,255,.3)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
      return dataArr
    }

    function Pie3() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 10 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 30,
            itemStyle: {
              normal: {
                color: "rgba(0,255,255,.5)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
      return dataArr
    }
    let option = {
      backgroundColor: '#1f1e26',
      title: [{
        text: '75%',
        x: '50%',
        y: '37%',
        textAlign: 'center',
        textStyle: {
          fontSize: '70',
          fontWeight: '100',
          color: '#79ffff',
          textAlign: 'center',
        },
      }, {
        text: '林区受到保护',
        left: '50%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
          fontSize: '18',
          fontWeight: '400',
          color: '#5c5a68',
          textAlign: 'center',
        },
      }, {
        text: 'PROTECTED',
        left: '50%',
        top: '57%',
        textAlign: 'center',
        textStyle: {
          fontSize: '14',
          fontWeight: '400',
          color: '#484556',
          textAlign: 'center',
        },
      }, ],
      polar: {
        radius: ['51%', '47%'],
        center: ['50%', '50%'],
      },
      angleAxis: {
        max: 100,
        show: false,
        startAngle: 0,
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,

        },
        axisTick: {
          show: false
        },
      },
      series: [{
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: '#464451',
        },
        data: [75],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: '#0ff'
            }, {
              offset: 1,
              color: '#02aeff'
            }]),
          }
        }
      },
        {
          hoverAnimation: false,
          type: 'pie',
          z: 2,
          data: labelData,
          radius: ['52%', '59%'],
          zlevel: -2,
          itemStyle: {
            normal: {
              borderColor: '#1f1e26',
              borderWidth: 4,
            }
          },
          label: {
            normal: {
              position: 'inside',
              show: false,
            }
          },
        },
        {
          hoverAnimation: false,
          type: 'pie',
          z: 1,
          data: labelData1,
          radius: ['52%', '59%'],
          zlevel: -2,
          itemStyle: {
            normal: {
              borderColor: '#1f1e26',
              borderWidth: 4,
            }
          },
          label: {
            normal: {
              position: 'inside',
              show: false,
            }
          },
        },
        {
          type: 'pie',
          radius: ['42%', '43%'],
          center: ['50%', '50%'],
          data: [{
            hoverOffset: 1,
            value: 100,
            name: '',
            itemStyle: {
              color: '#ff6189',
            },
            label: {
              show: false
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0
                }
              }
            },
            hoverAnimation: false,
          },
            {
              label: {
                show: false
              },
              labelLine: {
                normal: {
                  smooth: true,
                  lineStyle: {
                    width: 0
                  }
                }
              },
              value: 100 - 75,
              hoverAnimation: false,
              itemStyle: {
                color: '#3c3a48',
              },
            }
          ]
        },

        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          radius: ['67%', '65.5%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie()
        },
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          startAngle: -150,
          radius: ['65%', '63.5%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie3()
        },
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          startAngle: -140,
          radius: ['68%', '66.5%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie()
        },
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          radius: ['61%', '60%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie1()
        },
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          startAngle: -140,
          radius: ['61%', '60%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie2()
        },
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          startAngle: -147.5,
          radius: ['61%', '60%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie2()
        },

      ]
    };
    myChart.setOption(option);
  }


});